<template>
  <div class="main-top">
    <el-breadcrumb separator-class=" ">
      <el-tag
        v-for="tag in tags"
        :key="tag.name"
        closable
        size="small"
        :type="tag.type"
      >
        <el-breadcrumb-item :to="{ path: '/' }">{{
          tag.name
        }}</el-breadcrumb-item>
      </el-tag>
      <div class="mianbao">
        <el-dropdown trigger="click">
          <el-button type="primary">
            更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-breadcrumb>
    <div class="main-dottom">
      <div class="dottom-top">
      <div class="col-left">
        <div class="UserInfo">
          <div class="User-top">
            <el-avatar
              :span="24"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              :size="120"
            ></el-avatar>
            <div class="User">
              <h3>{{a}}</h3>
              <p>超级管理员</p>
            </div>
          </div>
          <div class="denglu">上次登录时间：<span>2019-11-01</span></div>
          <div class="didian">上次登录地点：<span>东莞</span></div>
        </div>
        <div class="Language">
          <div class="Language-top">
            <span>语言详情</span>
          </div>
          <div class="Language-bottom">
            <span>Vue</span>
            <el-progress
              :percentage="71.3"
              color="rgb(66, 185, 131)"
            ></el-progress>
            <span>Javascript</span>
            <el-progress
              :percentage="24.1"
              color="rgb(241, 224, 90)"
            ></el-progress>
            <span>CSS</span>
            <el-progress :percentage="13.7" ></el-progress>
            <span>HTML</span>
            <el-progress
              :percentage="5.9"
              color="#F56C6C"
            ></el-progress>
          </div>
        </div>
      </div>

      <div class="col-right">
        <div class="col-right-top">
          <el-row :gutter="20" justify="space-between" type="flex">
            <el-col :span="8"
              ><div class="grid-content bg-purple"></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple"></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple"></div
            ></el-col>
          </el-row>
        </div>
        <div class="col-right-bottom">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>代办事项</span>
              <input type="text" v-model="inputs" placeholder="请输入内容" class="top-inputs" >
              <el-button type="text" class="el-input__icon"  @click="chaxun(),isShowMenu(0)">搜索</el-button>

              <!-- <i slot="prefix" class="el-input__icon el-icon-search" @click="searchs()"></i> -->
              <input type="text" v-model="input" placeholder="请输入内容" class="top-input">
              <!-- <el-input size="small" placeholder="请输入内容" suffix-icon="el-icon-date" > </el-input> -->
              <el-button style="float: right; padding: 3px 0" type="text" @click="addlist()">添加</el-button>
            </div>
            <div class="text item">
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                :show-header="false"
                @selection-change="handleSelectionChange"
                max-height="250"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="desc" show-overflow-tooltip>
                </el-table-column>
                <el-table-column>
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="
                        handleEdit(scope.$index),
                          (dialogVisible = true)">Edit</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
          <el-dialog
            title="修改"
            :visible.sync="dialogVisible" 
            width="30%">
            <el-form :model="tableData" ref="tableDataRef" label-width="100px" class="demo-ruleForm">
            <el-form-item label="修改">
              <el-input 
                placeholder="请输入内容"
            
                v-model=newtableData.desc
                clearable>
              </el-input>
            </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible=false" >重 置</el-button>
              <el-button type="primary" @click=" updatatable(),dialogVisible=false">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
      </div>
      <div class="bottom-bottom">
     <el-col :span="12" style="padding-right:20px">
    <el-card shadow="hover">
      <!-- <div id="main" style="width: 600px; height: 400px"></div> -->
      <WelcomeEchen></WelcomeEchen>
    </el-card>
  </el-col>
  <el-col :span="12">
    <el-card shadow="hover" style="padding-right:20px">
     <div id="getmain" style="width: 720px; height: 360px"></div>
    </el-card>
  </el-col>
      </div>
    </div>
  </div>
</template>

<script>
import {getseries} from '../api/series'
import * as echarts from "echarts";
import WelcomeEchen from'../page/WelcomeEchen.vue'
import { number } from 'echarts';
// import { component } from 'vue/types/umd';
export default {
  components:{
        WelcomeEchen
  },
  name: "Welcome",
   props:["a"],
  data() {
    return {
      index:0,
      tags: [
        { name: "标签一" },
        { name: "标签二" },
        { name: "标签三" },
        { name: "标签四" },
        { name: "标签五" },
      ],
      tableData: [
        {
          desc: "写HTML",
        },
        {
          desc: "写CSS",
        },
        {
          desc: "写JS",
        },
        {
          desc: "写VUE",
        },
      ],
      newdata:"",
      newtableData:{
        desc:"",
        id:""
      },
      search: "",
      numberValidateForm: {
        age: "",
      },
      dialogVisible: false,
       input: '',
       inputs:'',
       addlists:false,
      geseries:[],
      Salestrend:[]
    };
  },
computed:{
     name(){
       return this.$store.state.name;
     }
  },
  methods: {
    isShowMenu(){
      let showbutton = JSON.parse(sessionStorage.getItem("vuelogin"))
      console.log("showbutton",showbutton[1])
      // return showbutton[1].show==number
    },


    handleEdit(index) {
     this.index=index,
     console.log (index)
      this.newtableData={...this.tableData[index]}
      
      //第二种方法
      // console.log(index)
      // this.newtableData.drsc= this.tableData[index].desc[0];
      // this.newtableData.id= index;
      // this.newdata= this.tableData[index].desc;
      this.tableData.forEach((item,index)=>{
      item.id=index;
      });
      console.log(this.tableData)

    },
    updatatable(){
      let userIndex;  
      this.tableData.forEach((user,index)=>{
        console.log(index)
        if(user.id==this.tableData[index].id){
          console.log("user.id",user.id)
          console.log("this.tableData[index].id",this.tableData[index].id)
          userIndex=this.index;
          console.log("userIndex",userIndex);
        }
      });
      this.tableData.splice(userIndex,1,this.newtableData);
      console.log(userIndex)
      console.log(this.tableData)
      this.newtableData={
                    desc:"",
                    id:""
        }

      //第二种方法
      // console.log(this.tableData)
      //   this.tableData.forEach((item,index)=>{
      //     console.log(item);
      //     let id = item.id
      //     console.log(item.id);
      //       if(id == this.newtableData.id){
      //         this.tableData.splice(index,1,this.newtableData);
      //         console.log(index)
      //       }
      //   });
      //           this.newtableData={
      //               desc:"",
      //               id:""
      //         }
    },
    handleDelete(index) {
    this.tableData. splice(index,1);
     console.log(index)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    handleClose() {
      this.$confirm("确认关闭？");
    },
    addlist(){
      this.tableData.push({
          desc: this.input  
      });
      this.input = "";
      console.log( this.tableData)
    }, 
    chaxun() {
      let Obj=this.inputs
      console.log(Obj)
      this.tableData=this.tableData.filter(table=>{
        let isTrue=true;
        if(Obj==table.desc){
           return isTrue;
        }
      });
    },
    handleSelectionChange(){
      console.log(1);
    },
    getSalestrend(){
      this.Salestrend=this.$store.state.totrendData
      this.Salestrend.map((item)=>{
        console.log(item)
      })
              
    },
   
    getmain(){
      this.char=echarts.init(document.getElementById("getmain"));
      // var chartDom = document.getElementById('getmain');
      // var myChart = echarts.init(chartDom);
      // var option;
this.char.setOption({
// option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['家电', '百货', '食品']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['5月','6月', '7月', '8月', '9月', '10月']
    },
    yAxis: {
        type: 'value'
    },
    series:[],
   
    
});
  this.$axios.get('http://localhost:3000/Category')
  .then((res)=>{
    // console.log(res)
    this.geseries=res.data;
    // console.log(this.geseries);
    this.char.setOption({
        series:this.geseries
    })
  })
// option && myChart.setOption(option);

    },
      async getSeries(){
        let data= await getseries()
          this.geseries=data
        }
  },
   mounted() {
    // this.drawChart();
    this.getmain();
  this.getSalestrend()
    // this.getSeries();
  }  
};
</script>

<style  scoped>
.col-right-bottom{
 position: relative;
}
.top-input{
  width: 300px;
  height: 30px;
position: absolute;
top: 12px;
right: 118px;
}
.el-input__icon{
  width: 10px;
  height: 10px;
  display: inline-block;
  position: absolute;
top: 14px;
left: 414px;
}
.top-inputs{
  width: 300px;
  height: 30px;
position: absolute;
top: 12px;
left: 100px;
}
.main-dottom {
  padding: 10px;
}
.el-breadcrumb {
  height: 100%;
  background-color: white;
}
.mianbao {
  width: 110px;
  height: 100%;
  float: right;
}
.el-dropdown {
  margin: auto;
  margin-top: 2px;
  margin-left: 7px;
}
.el-button {
  padding: 7px 15px;
  width: 97px;
  height: 28px;
}
.el-button span {
  margin: auto;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.dottom-top{
  margin-bottom: 20px;
}
.col-left {
  width: 531px;
  height: 528px;
  display: inline-block;
  padding-right: 10px;
  /* float: left; */
}
.el-input__inner{
  width: 100px !important;
}
.UserInfo {
  width: 531px;
  height: 252px;
  background-color: white;
  display: inline-block;
  padding: 20px;
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
}
.UserInfo span {
  margin-left: 70px;
}
.UserInfo .denglu,
.didian {
  height: 25px;
}
.User-top {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 2px solid #ccc;
  margin-bottom: 20px;
}
.is-scrolling-none{
  height: auto;
}
.User {
  width: 173px;
  height: 53px;
  padding-left: 50px;
}
.User-top h3 {
  font-size: 30px;
  color: #222;
}
.Language {
  width: 531px;
  height: 254px;
  background-color: white;
  display: block;
}
.Language-top {
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
}
.Language-bottom {
  padding: 20px;
}
.col-right {
  width: 1070px;
  height: 528px;
  float: right;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 103px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-card {
  height: 403px;
}
.obox-card{
  width: 480px;
}
.bottom-bottom{
  height: 428px;
}
</style>